<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        // Configuration goes here
    });

	  $('a[rel*=facebox]').facebox({
	    loading_image : '<?=APP_ROOT?>/facebox/loading.gif',
	    close_image   : '<?=APP_ROOT?>/facebox/closelabel.gif'
	  }); 
});

</script>

<div id="photo-slider">
<ul id="mycarousel" class="jcarousel-skin-custom">
<? 
			$i = 0;
			foreach ($photos as $photo){
				$i++;
				$id = $photo['Photo']['id'];
				$name = $photo['Photo']['name'];
				$filename = $photo['Photo']['filename'];				
				$group = $photo['Photo']['group'];				
		?>

	<!-- The content goes in here -->
	<li>
		<a rel="facebox" href="<?=APP_ROOT?>/img/Photos/big/<? echo $filename; ?>">
			<img src="<?=APP_ROOT?>/img/Photos/small/<? echo $filename; ?>" width="80" height="80">
		</a>
	</li>
<?php }?>
</ul>
</div>